<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form :inline="true" :model="queryParams" size="small">
        <el-form-item label="套餐名称">
          <el-input v-model="queryParams.name" placeholder="请输入套餐名称" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main-content">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="tableData" style="width: 100%" stripe border highlight-current-row class="modern-table">
        <el-table-column prop="id" label="ID" width="60" align="center" />
        <el-table-column prop="name" label="套餐名称" align="center" />
        <el-table-column prop="desc1" label="描述1" align="center" />
        <el-table-column prop="desc2" label="描述2" align="center" />
        <el-table-column prop="num" label="数量" align="center" />
        <el-table-column prop="price" label="价格" align="center" />
        <el-table-column prop="tag1" label="标签1" align="center" />
        <el-table-column prop="tag2" label="标签2" align="center" />
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)" style="margin-right: 8px">编辑</el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px" append-to-body  class="modern-dialog">
      <el-form ref="form" :model="form" label-width="90px" class="modern-form">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="套餐名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入套餐名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数量" prop="num">
              <el-input-number v-model="form.num" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="价格" prop="price">
              <el-input-number v-model="form.price" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签1" prop="tag1">
              <el-input v-model="form.tag1" placeholder="请输入标签1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="标签2" prop="tag2">
              <el-input v-model="form.tag2" placeholder="请输入标签2" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="描述1" prop="desc1">
              <el-input v-model="form.desc1" placeholder="请输入描述1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="描述2" prop="desc2">
              <el-input v-model="form.desc2" placeholder="请输入描述2" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listPlan, addPlan, updatePlan, getPlan } from '@/api/door/price'

export default {
  name: 'PlanList',
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: ''
      },
      dialogVisible: false,
      dialogTitle: '',
      form: {},
      isEdit: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      listPlan(this.queryParams).then(res => {
        let rows = []
        let total = 0
        if (res.data && res.data.rows) {
          rows = res.data.rows
          total = res.data.total || 0
        } else if (res.rows) {
          rows = res.rows
          total = res.total || 0
        }
        this.tableData = rows
        this.total = total
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams.name = ''
      this.handleQuery()
    },
    handleAdd() {
      this.form = { name: '', desc1: '', desc2: '', num: 0, price: 0, tag1: '', tag2: '' }
      this.dialogTitle = '新增套餐'
      this.dialogVisible = true
      this.isEdit = false
    },
    handleEdit(row) {
      getPlan(row.id).then(res => {
        this.form = { ...res.data }
        this.dialogTitle = '编辑套餐'
        this.dialogVisible = true
        this.isEdit = true
      })
    },
    handleDelete(row) {
      this.$confirm('确定要删除该套餐吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 实际删除接口未提供，假如有delPlan方法可在此调用
        this.$message.success('删除成功（请补充删除接口）')
        this.getList()
      })
    },
    submitForm() {
      if (this.isEdit) {
        updatePlan(this.form).then(() => {
          this.$message.success('修改成功')
          this.dialogVisible = false
          this.getList()
        })
      } else {
        addPlan(this.form).then(() => {
          this.$message.success('新增成功')
          this.dialogVisible = false
          this.getList()
        })
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 24px 32px;
  background: #f6f8fa;
  border-radius: 12px;
  min-height: 100vh;
}
.search-bar {
  background: #fff;
  padding: 16px 20px 0 20px;
  border-radius: 8px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.main-content {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 18px 20px 12px 20px;
}
.mb8 {
  margin-bottom: 12px;
}
.modern-table {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: none;
}
.el-table th, .el-table td {
  font-size: 14px;
}
.el-table .el-table__row:hover {
  background: #e6f7ff !important;
}
.el-table .el-table__header th {
  background: #f0f2f5;
  color: #333;
}
.el-table .el-table__body tr {
  transition: background 0.2s;
}
::v-deep .modern-dialog .el-dialog__body {
  padding: 18px 24px 6px 24px;
}
.modern-form .el-form-item {
  margin-bottom: 12px;
}
.modern-form .el-input, .modern-form .el-input-number {
  width: 100%;
}
.dialog-footer {
  text-align: right;
  padding: 10px 24px 18px 24px;
}
</style>
